<template>
  <div class="sidebar-container">
    <div class="search-wrapper">
      <el-input v-model="keywords" placeholder="输入关键字后按回车以搜索" />
    </div>

    <!-- TODO: 数据库表设计的有问题, 现在是无法排序的, 应该再加一个排序字段 -->
    <!-- 拖动排序组件:https://github.com/SortableJS/Vue.Draggable#readme -->
    <el-menu :default-openeds="['1']" :router="true">
      <!-- 第一层 -->
      <div v-for="item in dirs" :key="item.id">
        <el-submenu v-if="item.isDir" :index="`${item.id}`">
          <template #title>
            <i class="el-icon-folder"></i>
            <span>{{ item.name }}</span>
          </template>
          <!-- 第二层 -->
          <div v-for="child in item.children" :key="child.id">
            <el-submenu v-if="child.isDir" :index="`${child.id}`">
              <template #title>
                <i class="el-icon-folder"></i>
                <span>{{ child.name }}</span>
              </template>
              <!-- 第三层: 最多3层, 嵌套太多特别消耗性能 -->
              <el-menu-item v-for="son in child.children" :key="son.id" :index="`/${projectid}/docs/${son.id}`">
                <i class="el-icon-document"></i>
                <span>{{ son.name }}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="`/${projectid}/docs/${child.id}`">
              <i class="el-icon-document"></i>
              <span>{{ child.name }}</span>
            </el-menu-item>
          </div>
        </el-submenu>
        <el-menu-item v-else :index="`/${projectid}/docs/${item.id}`">
          <i class="el-icon-document"></i>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "sidebar",
  created() {
    this.projectid = this.$route.params.projectid;
  },
  data: () => ({
    keywords: "",
    projectid: "",
    dirs: [
      {
        id: 100,
        name: "项目说明文档",
      },
      {
        id: 101,
        name: "API文档",
        isDir: true,
        children: [
          {
            id: 102,
            name: "用户模块",
            isDir: true,
            children: [
              {
                id: 103,
                name: "登录接口",
              },
              {
                id: 104,
                name: "注册接口",
              },
            ],
          },
          {
            id: 105,
            name: "首页接口",
          },
        ],
      },
    ],
  }),
  methods: {
    log(e) {
      console.info(e);
    },
  },
};
</script>

<style lang="scss" scoped>
.search-wrapper {
  padding: 10px;
}
.el-menu {
  border: none !important;
}
</style>
